<template>
  <div :class="{ 'text-center': computedState.position === 1 }">
    <MaterialHeader
      :serialNum="serialNum"
      :title="computedState.title"
      :desc="computedState.desc"
      :titleSize="computedState.titleSize"
      :descSize="computedState.descSize"
      :titleWeight="computedState.titleWeight"
      :descWeight="computedState.descWeight"
      :titleItalic="computedState.titleItalic"
      :descItalic="computedState.descItalic"
      :titleColor="computedState.titleColor"
      :descColor="computedState.descColor"
    />
    <div class="checkbox">
      <el-checkbox-group v-model="checkboxVal" @click.stop>
        <el-checkbox v-for="(item, index) in computedState.options" :value="item" :key="index">{{
          item
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import MaterialHeader from '@/components/Survey/Common/MaterialHeader.vue'
import type { OptionsStatusProps } from '@/types'
import {
  gerCurrentStatus,
  gerStringStatus,
  gerStringStatusByCurrentStatus,
  gerTextStatus,
} from '@/utils'

const props = defineProps<{
  serialNum: number // 序号
  status: OptionsStatusProps
}>()
const checkboxVal = ref([])
const computedState = computed(() => {
  return {
    title: gerTextStatus(props.status.title),
    desc: gerTextStatus(props.status.desc),
    options: gerStringStatus(props.status.options),
    position: gerCurrentStatus(props.status.position),
    titleSize: gerStringStatusByCurrentStatus(props.status.titleSize),
    descSize: gerStringStatusByCurrentStatus(props.status.descSize),
    titleWeight: gerCurrentStatus(props.status.titleWeight),
    descWeight: gerCurrentStatus(props.status.descWeight),
    titleItalic: gerCurrentStatus(props.status.titleItalic),
    descItalic: gerCurrentStatus(props.status.descItalic),
    titleColor: gerTextStatus(props.status.titleColor),
    descColor: gerTextStatus(props.status.descColor),
  }
})
</script>

<style scoped></style>
